<template>
    <el-dialog :visible="visible" :title="$t('inspectionManage.barcode')" width="800px" append-to-body top="14vh" class="knowledge-dialog" :close-on-click-modal="false" :before-close="close" @close="onClose" @open="onOpen">
        <div>
            <!-- <el-form :model="queryParams" size="small" label-position="left" label-suffix=":" ref="searchForm" label-width="80px">
                <el-row :gutter="24">
                    <el-col :span="8">
                        <el-form-item :label="$t('inventoryManagement.userNo')" prop="loginName">
                            <el-input v-model="queryParams.loginName" :placeholder="$t('public.inputPl')" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('inventoryManagement.userName')" prop="userName">
                            <el-input v-model="queryParams.userName" :placeholder="$t('public.inputPl')" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item style="text-align:right">
                            <el-button type="primary" icon="el-icon-search" class="search-btn" @click="getList" size="mini">{{ $t("public.search") }}</el-button>
                            <el-button icon="el-icon-refresh" @click="resetForm" size="mini">{{ $t("public.reset") }}</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form> -->
            <div class="container-table">
                <!-- <el-button @click="handleOperation" v-text="isEdit?'保存':'编辑'" > </el-button> -->
                <el-table   max-height="350" border stripe v-loading="loading" @selection-change="handleSelectionChange" :data="userList">
                    <el-table-column type="selection" width="55" v-if="multiple" align="center" />
                    <el-table-column :label="$t('public.serialNum')" type="index" width="50" align="center">
                        <template scope="scope">
                            <span>{{ scope.$index +1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  :label="$t('specimen.sampleCode')" align="left" prop="sampleCode" minWidth="160" />
                   
                    <el-table-column :label="$t('inventoryManagement.inspectionValue')"   align="center" width="100">
                        <template slot-scope="scope">                         
                             <span v-if="scope.row.checkResult==0">不合格</span>
                             <span v-if="scope.row.checkResult==1">合格</span>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('public.opera')" v-if="!multiple" align="center" width="200">
                        <template slot-scope="scope">
                            <!-- <span>
                            <a class="action-wrap" @click="deleteRow(scope.row.id)" style="color:#5a9eaf">
                                {{$t('public.delete')}}
                            </a>
                        </span>
                        <span>
                            <a class="action-wrap" @click="deleteRow(scope.row.id)" style="color:#5a9eaf">
                                {{isEdit?$t('public.save'):$t('public.edit')}}
                            </a>
                        </span> -->

                        <div class="action-wrap">
                           
                            <!-- <table-body-btn type="edit" :name="$t('public.edit')" @click.native="handleEdit(scope)" /> -->
                            <el-button  @click.native="handleEdit(scope.row)">{{$t('public.edit')  }}</el-button>
                            <el-button @click.native="handleDelete(scope.row,scope.$index)">{{$t('public.delete')  }}</el-button>

                            <!-- <table-body-btn :name="$t('public.edit')" type="edit" @click.native="handleEdit(scope.row)" />
                            <table-body-btn :name="$t('public.delete')" type="delete" @click.native="handleDelete(scope.row,scope.$index)" /> -->
                        </div>
                        </template>

                    </el-table-column>

                </el-table>

                <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" layout="total, sizes, prev, pager, next, jumper" />
             -->
            </div>
        </div>
        <div slot="footer">
            <el-button size="mini" type="default" icon="el-icon-close" @click="handleConfirm">{{ $t("btn.close") }}</el-button>
            <el-button type="primary" @click="submitData" icon="el-icon-check" size="small" v-if="multiple">{{$t('modal.yes')}}</el-button>
        </div>
<!--edit dialog-->
        <el-dialog :visible="showEdit"
      width="460px"
      custom-class="dialog-class"
      append-to-body
      top="3vh"
      @close="cancelEdit"
      :close-on-click-modal="false"
    >
    
      <el-container>
        <el-main style="overflow: visible">
          <div class="opera-body">
            <div class="opera-table">
              <el-form
                class="query-form"
                :model="tmpEditRow"
                ref="queryForm"
                :inline="true"
                label-width="68px"
                size="small"
              >
                <el-form-item
                  :label="$t('specimen.sampleCode')"
                  prop="sampleCode"
                  size="small"
                >
                  <el-input  @input="changeCode"
                    v-model="tmpEditRow.sampleCode"
                    clearable
                    size="small"
                  
                  />
                </el-form-item>

                <el-form-item
                  :label="$t('inventoryManagement.inspectionValue')"
                  prop="checkResult"
                  size="small"
                >
                <el-select v-model="tmpEditRow.checkResult"  @change="change"> 
                <el-option label="合格" value="1"></el-option>
                <el-option label="不合格" value="0"></el-option>
                </el-select>
                </el-form-item>
                
        

              </el-form> 
            

            </div>
          </div>
        </el-main>

        <el-footer height="34px">
          <div class="dialog-footer">
            <el-button @click="cancelEdit" size="small" icon="el-icon-close">{{
              $t("public.close")
            }}</el-button>
            <el-button
              type="primary"
              @click="saveEditBarcode"
              size="small"
              icon="el-icon-check"
              >{{ $t("btn.save") }}</el-button
            >
          </div>
        </el-footer>
      </el-container>
    </el-dialog>
    </el-dialog>
  
</template>

<script>
 
import {
   listScanSampleCodeAPI,
   saveBarcode,
   delBarcode
} from '@/api/inspectionManagement/inspectionManagement'
export default {
    name: 'BizSelectUserDialog',
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        params: {
            type: Object,
            default: function(){
                return {id:''};
            },
        },
        multiple: {
            type: Boolean,
            default: false,
        },
        incomingId:{
            type:String || Number,
            default:''

        }
    },
    data() {
        return {
            editRow:{},
            tmpEditRow:{},
            showEdit:false,
            isEdit:false,
            showRlt:false,//
            total: 1,
            templateList: [{ templateName: 'xx模板' }],
            userList: [],
            searchForm: {
                templateName: null,
            },
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                incomingId: null,
               
            },
            loading: false,
            data: null,
            title: '',
            nodeType: this.$store.state.fmea.nodeType,
        }
    },
    methods: {
        changeCode(v){
      
            this.tmpEditRow.sampleCode=v;  
            this.$forceUpdate();
        },
        change(v){
            
            this.tmpEditRow.checkResult=v;
            this.$forceUpdate();
        },
        handleDelete(row,index){
            delBarcode({id:row.id}).then((response)=>{
                if (response.code == 200){
                    this.getList();
                } 
                else{
                    console.error(response.msg);
                }    
            });
           
        },
        cancelEdit(){
            this.showEdit=false;
        },
        handleEdit(row){
            this.editRow=row;
            this.tmpEditRow={};
            Object.assign( this.tmpEditRow,row);
            this.showEdit=true;
        },
        saveEditBarcode(){
            
            saveBarcode(this.tmpEditRow).then((response)=>{
                if (response.code == 200){
                    this.editRow.checkResult=this.tmpEditRow.checkResult;
                    this.editRow.sampleCode=this.tmpEditRow.sampleCode;
                    this.showEdit=false;
                }   
                else
                {
                    console.error(response.msg)
                }  
            });
           
        },
        // handleOperation(){
        //     if(this.isEdit)
        //     {//To save
        //         this.isEdit=false;
                
        //     }
        //     else
        //     {
        //         this.isEdit=true;
 
        //         saveBarcode()
        //     }
           
        // },
   
        // cellClick(row, column, cell, event){
        //     row.isEdit=true;
        //     this.showRlt=true;
        //     debugger;
        //     this.$forceUpdate();
        // },
        submitData() {
            console.log(this.names.join(','))
            if (this.ids.length === 0) {
                this.$modal.msgWarning('请至少选择一个用户!')
                return
            }
            this.$emit('callback', this.names.join(','), this.ids.join(','))
            this.visible = false
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.userId)
            this.names = selection.map((item) => item.userName)
        },
        getList() {
            this.loading = true
            listScanSampleCodeAPI({incomingId:this.incomingId}).then((response) => {
                if (response.code == 200 && response.data) {
                    this.userList = response.data
                 
                    this.total = response.total
                    this.loading = false
                }
            })
        },
        // 窗口打开
        onOpen() {
            this.getList()
        },
        // 窗口关闭
        onClose() {
            this.data = null
        },
        handleConfirm() {
            this.$emit('update:visible', false)
        },
        choose(scope) {
            console.log(scope.row.templateName)
            getItemsByTemplateName({
                templateName: scope.row.templateName,
            }).then((response) => {
                console.log(response)
                this.$emit('callback', response.data.itemList)
                this.$emit('update:visible', false)
            })
        },
        // 窗口关闭前执行
        close() {
            this.$emit('update:visible', false)
        },
        resetForm() {
            this.$refs['searchForm'].resetFields()
            this.getList()
        },
    },
}
</script>

<style scoped>
::v-deep .el-dialog__footer {
    text-align: center;
}
.search-btn {
    background: #20b09f;
    border-color: #20b09f;
}
</style>
